


<!DOCTYPE html>

<html lang="en" >
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style>
    </style>
    <style type="text/css">
        #input-limit{
            height: 30px;
            background-color: #1e9fff;
            color: whitesmoke;
            width: 60px;
            border:1px #1e9fff;
            border-radius: 4px;
        }
        #input-limit:hover{
            background-color:#bbdaff;
        }
    </style>
</head>
<body>
<div class="layui-main">
    <a class="layui-btn layui-btn-sm" id="add-btn">增加患者</a>
</div>

<!-- 添加弹出层 -->
<div id="add-layer" style="display: none; padding: 20px">
    <form id="add-form" class="layui-form layui-form-pane">

        <div class="layui-form-item">
            <label class="layui-form-label">患者ID</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="uid" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">患者姓名</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="uname" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="idcard" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="address" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="phone" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <label>
                    <input type="date" name="birthday" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者性别</label>
            <div class="layui-input-block">
                <label>
                    <select name="sex" class="layui-input" lay-verify="required">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var AddIndex;
        // 显示添加弹出层
        $('#add-btn').click(function () {
            // 每次显示前重置表单
            $('#add-form')[0].reset();
            AddIndex = layer.open({
                type: 1,
                title: '添加患者',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#add-layer')
            });
        });
    })


</script>
</body>
</html>